<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
  <base href="/oa1/" />
  <title>产品列表 - 襄阳蓝芯智能化办公系统</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
  <style>
    .thead-blue {
      color: #fff;
      font-weight: bold;
      background-color: #337ab7;
    }
  </style>
  <script src="static/jquery/jquery-1.10.2.min.js"></script>
  <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 搜索区域 -->
<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title">产品搜索</h4>
  </div>
  <div class="panel-body">
    <form action="kh/product/listKhProduct" id="seachform" method="post" class="form-horizontal" role="form">
      <div class="form-group">
        <div class="col-md-12">
          <label for="linkname" class="col-md-2 control-label">产品名称</label>
          <div class="col-md-4">
            <input type="hidden" name="page" id="page" value="1">
            <input type="hidden" name="pageSize" id="pageSize" value="5">
            <input type="text" class="form-control" name="linkname" value="${searchLinkname}" id="linkname" placeholder="请输入产品名称">
          </div>
          <div class="col-md-6">
            <button type="button" onclick="searchBtn()" class="btn btn-success">搜索产品</button>
            <a type="button" href="kh/product/toAddKhProduct" class="btn btn-info">添加产品</a>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- 列表区域 -->
<div class="panel panel-primary">
  <table class="table table-bordered table-hover">
    <thead>
    <tr class="thead-blue" align="center">
      <td>产品图片</td>
      <td>产品编号</td>
      <td>产品名称</td>
      <td>产品规格</td>
      <td>产品描述</td>
      <td>包装描述</td>
      <td>备注</td>
      <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${pageInfo.records}" var="product">
      <tr align="center" valign="middle">
        <td style="vertical-align: middle">
          <c:if test="${not empty product.picture}">
            <img src="${pageContext.request.contextPath}/static/${product.picture}" width="100px" height="100px" alt="${product.linkname}">
          </c:if>
          <c:if test="${empty product.picture}">
            <img src="static/images/default-product.png" width="100px" height="80px" alt="默认图片">
          </c:if>
        </td>
        <td style="vertical-align: middle">${product.oid}</td>
        <td style="vertical-align: middle">${product.linkname}</td>
        <td style="vertical-align: middle">${product.url}</td>
        <td style="vertical-align: middle">${product.info}</td>
        <td style="vertical-align: middle">${product.packdesc}</td>
        <td style="vertical-align: middle">${product.memo}</td>
        <td style="vertical-align: middle">
          <a href="kh/product/toUpdateKhProduct?oid=${product.oid}" class="btn btn-warning btn-xs">修改</a>
          <button type="button" onclick="deleteKhProduct(${product.oid})" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#confirmModal">删除</button>
        </td>
      </tr>
    </c:forEach>

    <c:if test="${pageInfo.total == 0}">
      <tr align="center">
        <td colspan="8">暂无产品数据</td>
      </tr>
    </c:if>
    </tbody>
  </table>
</div>

<!-- 分页控件 -->
<div class="input-group col-md-8 col-md-offset-2">
  <div class="row">
    <div class="btn-group">
      <button onclick="gotoPage(1, ${pageInfo.size})"
              class="btn btn-primary pagination-btn ${pageInfo.current == 1 ? 'disabled' : ''}"
              type="button">首页</button>

      <button onclick="gotoPage(${pageInfo.current - 1}, ${pageInfo.size})"
              class="btn btn-primary pagination-btn ${pageInfo.current == 1 ? 'disabled' : ''}"
              type="button">上一页</button>

      <button class="btn btn-primary pagination-btn disabled"
              type="button">当前第${pageInfo.current}/${pageInfo.pages}页</button>

      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          每页显示${pageInfo.size}条 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="javascript:gotoPage(1,5)">每页显示5条</a></li>
          <li><a href="javascript:gotoPage(1,10)">每页显示10条</a></li>
          <li><a href="javascript:gotoPage(1,15)">每页显示15条</a></li>
          <li><a href="javascript:gotoPage(1,20)">每页显示20条</a></li>
        </ul>
      </div>

      <button class="btn btn-primary pagination-btn disabled"
              type="button">共${pageInfo.total}条记录</button>

      <button onclick="gotoPage(${pageInfo.current + 1}, ${pageInfo.size})"
              class="btn btn-primary pagination-btn ${pageInfo.current == pageInfo.pages ? 'disabled' : ''}"
              type="button">下一页</button>

      <button onclick="gotoPage(${pageInfo.pages}, ${pageInfo.size})"
              class="btn btn-primary pagination-btn ${pageInfo.current == pageInfo.pages ? 'disabled' : ''}"
              type="button">尾页</button>
    </div>
  </div>
</div>

<br><br><br>

<!-- 删除确认模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">提示</h4>
      </div>
      <div class="modal-body">确认删除该产品吗？</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="subconfirm" class="btn btn-primary">确认删除</button>
      </div>
    </div>
  </div>
</div>

<!-- 提示信息模态框 -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xs">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">提示</h4>
      </div>
      <div class="modal-body" id="alertmsg"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script>
  // 绑定删除确认事件
  $(document).ready(function(){
    $("#subconfirm").click(function(){
      deleteConfirm();
      $('#confirmModal').modal('hide');
    });
  });

  // 分页跳转
  function gotoPage(page, pageSize){
    $("#page").val(page);
    $("#pageSize").val(pageSize);
    $("#seachform").submit();
  }

  // 搜索提交
  function searchBtn(){
    $("#page").val(1);
    $("#seachform").submit();
  }

  // 存储待删除ID
  var deleteoid;
  function deleteKhProduct(oid){
    deleteoid = oid;
  }

  // 执行删除
  function deleteConfirm(){
    $.get("kh/product/deleteKhProduct",{"oid":deleteoid},function(result){
      if(result){
        location.reload();
      }else{
        $("#alertmsg").text("删除失败，请重试");
        $('#alertMsgModal').modal('show');
      }
    });
  }

  // 全局AJAX错误处理
  $(document).ajaxError(function(event,xhr) {
    if(xhr.status=="403"){
      document.location.href = xhr.getResponseHeader("url");
    }else if(xhr.status!="200"){
      console.log("服务器错误!");
    }
  });
</script>
</body>
</html>